﻿import React from 'react';
import ReactDOM from 'react-dom';
import mirror, {actions, connect,Link} from 'mirrorx';
import { FormattedMessage} from 'react-intl';
import Radar from '../lib/chart.radar'



class App extends React.Component { 
	constructor(props) {
		super(props);

		this.state = {
			unfoldMap:{
				radar:true
			}
		}
	}

	componentDidMount(){
		this.initRadar();
	}

	componentWillUnmount() {
		Radar.destory();
	}

	titleClick = (key)=>{
		let map = this.state.unfoldMap;
		map[key] = !map[key];
		this.setState({
			unfoldMap:map
		})
	}
	
	initRadar = ()=>{
        // $(".myLink").on("click",function(e){
        //     var target = $(e.target).closest(".myLink");
        //     location.href="/product-list"
        // });



         function formatPrice(num){
            num = num +"";
            var str="",len = num.length;
            for(var i=len-1;i>=0;i--){
                str = num[i]+ str;
                if((len-i)%3==0 && i!=len-1 && i!==0){
                    str = ","+str;
                }
            }
            return str;
         }
            

          //意外  医疗 重击 年金 寿险
          var dataArr =  [1800, 1000000, 10340000, 10, 700];
          var baseArr = [5000,3000000,1000,500,5000000];
          var tempData=[],temp;
          dataArr.forEach(function(item,index){
               temp = Math.min(item,baseArr[index]*0.95);
               temp = Math.max(temp,baseArr[index]*0.2);
               tempData.push(temp);
          });
          
          var sum = dataArr.reduce(function(a,b){return a+b;})
          var doms = document.querySelectorAll(".chart-value");
          var text,value;
          for(var i=0;i<doms.length;i++){
              value = (dataArr[i]/baseArr[i])*100;
              
              text = value.toFixed(2) +"%";

			  text = "$" + formatPrice(dataArr[i]);  //显示保额  不显示百分比
			  doms[i].innerHTML = text;
          }
		  Radar.setOptions({
			element: 'radar',
			radius: 100,
			polar: [
				{ text: '', max: baseArr[0], icon: { sx: 0, sy: 0, w: 32, h: 33, l: -17, t: -60 } },
				{ text: '', max: baseArr[1], icon: { sx: 32, sy: 0, w: 30, h: 33, l: 30, t: -30 } },
				{ text: '', max: baseArr[2], icon: { sx: 61, sy: 0, w: 32, h: 33, l: 10, t: 0 } },
				{ text: '', max: baseArr[3], icon: { sx: 93, sy: 0, w: 31, h: 33, l: -40, t: 0 } },
				{ text: '', max: baseArr[4], icon: { sx: 124, sy: 0, w: 29, h: 33, l: -60, t: -30 } }
			],
			title: '{v}',
			data:tempData,
			styles: {
				label: {
					//image: 'icon.png'
				},
				color:"#10c286",
				background:"#10c286",
			}
		}).init();

	}
	
	render() {
		const Lang = window.LangMessage;
		return (<div className="">
			<div className="main" id="mainBox">
				<div className="index-item bor-bottom">
						<p className="index-item-title  fc0  clearfix" onClick={()=>this.titleClick("radar")}>
							<span className="fl">
								<img src="/assets/images/index/nav1.png" className="fl mr20" />
								<span className="f34 strong mr10">{Lang.my_pro || 'My Protections'}</span>
							</span> 
							<span className="fr f28"><i className={this.state.unfoldMap["radar"]?"icon-up":"icon-down"}></i></span>
						</p>
						

						<div className={"index-box radar-box " + (this.state.unfoldMap["radar"] ?"":"none")}>
							<div className="protect-box mb30 p-relative" >
								<div className="protect-link1 myLink" style={{width:"100%"}} onClick={()=>actions.routing.push({pathname:"guarantee"})}>
									<p> <img src="/assets/images/index/protect1.png"  /></p>
									<p className="fc9 f24 mt10">{Lang.accident_wp || 'Accident'}</p>
									<p className="strong f26 chart-value"></p>
								</div>
								
								<canvas id="radar" width="250" height="200"></canvas>
				
								<div className="protect-link2 p-absolute myLink"  onClick={()=>actions.routing.push({pathname:"guarantee"})}>
									<p> <img src="/assets/images/index/protect2.png"  /></p>
									<p className="fc9 f24 mt10">{Lang.medical_wp || 'Medical'}</p>
									<p className="strong f26 chart-value"></p>
								</div>
								<div className="protect-link3 p-absolute myLink"  onClick={()=>actions.routing.push({pathname:"guarantee"})}>
									<p> <img src="/assets/images/index/protect3.png"  /></p>
									<p className="fc9 f24 mt10">{Lang.disease_wp || 'Disease'}</p>
									<p className="strong f26 chart-value"></p>
								</div>  
								<div className="protect-link4 p-absolute myLink"  onClick={()=>actions.routing.push({pathname:"guarantee"})}>
									<p> <img src="/assets/images/index/protect4.png"  /></p>
									<p className="fc9 f24 mt10">{Lang.pension || 'Pension'}</p>
									<p className="strong f26 chart-value"></p>
								</div>
								<div className="protect-link5 p-absolute myLink"  onClick={()=>actions.routing.push({pathname:"guarantee"})}>
									<p> <img src="/assets/images/index/protect5.png"  /></p>
									<p className="fc9 f24 mt10">{Lang.life || 'Life'}</p>
									<p className="strong f26 chart-value"></p>
								</div>
							</div>
						</div>
						
					</div>

				
					<div className="index-item bor-bottom">
						<p className="index-item-title  fc0  clearfix"  onClick={()=>this.titleClick("asset")}>
							<span className="fl">
								<img src="/assets/images/index/nav2.png" className="fl mr20 " />
								<span className="f34 strong">{Lang.my_asset || 'My Assets'}</span>
							</span>
							<span className="fr f28"><i className={this.state.unfoldMap["asset"]?"icon-up":"icon-down"}></i></span>
						</p>
						<div className={"index-box assets-box " + (this.state.unfoldMap["asset"] ?"":"none")}>
							<div className="item">
								<div className="p-relative  asset-data-box">
									<span className="strong f34 asset-data">$1,505,000.00</span> 
									<span className="strong f34 asset-data">$4,100.00</span> 
								</div>

							<div className="img-box">
									<img src="/assets/images/index/asset1.png"/>   
									<img src="/assets/images/index/asset2.png"/>                          
							</div>
								
								<div className="">
									<Link className="asset-des" to="/property">{Lang.saving_ac || 'Saving Account'}</Link>  
									<Link className="asset-des" to="/property">{Lang.policy_ac || 'Policy Account'}</Link>                                    
							</div>
							</div>

							<div className="item pt15">
								<div className="p-relative  asset-data-box">
									<span className="strong f34 asset-data">$4,605,000.00</span> 
									<span className="strong f34 asset-data">2,300</span> 
								</div>

								<div className="img-box">
									<img src="/assets/images/index/asset5.png" />  
									<img src="/assets/images/index/asset4.png" />   
								</div>
								
								<div>
									<Link className="asset-des" to="/property">{Lang.loan_ac || 'Loan Account'}</Link>  
									<Link className="asset-des" to="/property">{Lang.my_integral || 'My Integral'}</Link>                                  
								</div>
							</div>
						</div>       
					</div>

					<div className="index-item bor-bottom">
						<p className="index-item-title  fc0  clearfix"  onClick={()=>this.titleClick("connect")}>
							<span className="fl">
								<img src="/assets/images/index/nav3.png" className="fl mr20 " />
								<span className="f34 strong">{Lang.my_con || 'My Connections'}</span>
							</span>
							<span className="fr f28"><i className={this.state.unfoldMap["connect"]?"icon-up":"icon-down"}></i></span>
						</p>
						<div  className={"index-box connect-box " + (this.state.unfoldMap["connect"] ?"":"none")}>
							<div className="tac p-relative circle-box pt15">
								<div className="circle1 circle-com">
								
								</div>
								<div className="circle2 circle-com">
									<div className="connect-link1">
										<p> <img src="/assets/images/index/connection1.png"  /></p>
										<p className="fc9 f22 mt10">{Lang.circle_mem || 'Circle Members'}</p>
										<p className="strong f34">75</p>
									</div>
									<div className="connect-link2">
										<p> <img src="/assets/images/index/connection2.png"  /></p>
										<p className="fc9 f22 mt10">{Lang.shared_sum || 'Shared Sum Assured'}</p>
										<p className="strong f34">1,230,000</p>
									</div>
									<div className="connect-link3">
										<p> <img src="/assets/images/index/connection3.png"  /></p>
										<p className="fc9 f22 mt10">{Lang.circles || 'Circles'}</p>
										<p className="strong f34">5</p>
									</div>
									<div className="connect-link4">
										<p> <img src="/assets/images/index/connection4.png"  /></p>
										<p className="fc9 f22 mt10">{Lang.premium_dis || 'Premium Discount'}</p>
										<p className="strong f34">$505.00</p>
									</div>
								</div>
								<img className="circle-img circle-com" src="/assets/images/index/face2.png" />
								
							</div>

							<div className="clearfix pt40 mt40 mr10">
								<Link className="diy_color fr f30" to="/myship">{Lang.view_All || 'View All'}(6)</Link>
							</div>
						
						</div>
					</div>

					<div className="index-item bor-bottom">
						<p className="index-item-title  fc0  clearfix"  onClick={()=>this.titleClick("mydata")}>
							<span className="fl">
								<img src="/assets/images/index/nav4.png" className="fl mr20 " />
								<span className="f34 strong">{Lang.my_big_Data || 'My Big Data'}</span>
							</span>
							<span className="fr f28"><i className={this.state.unfoldMap["mydata"]?"icon-up":"icon-down"}></i></span>
						</p>
						<div className={"index-box mydata-box " + (this.state.unfoldMap["mydata"] ?"":"none")}>
							<div className="item">
								<p className="f34"><img src="/assets/images/index/fitbit.png" className="mb5 mr10 icon-img" />{Lang.fitbit_band || 'Fitbit band'}</p>
								<div className="pt20 pb20 data-des">
									<div className="des-box mr5">
										<div className="circle-box">
											<div className="circleProgress_wrapper">
												<div className="wrapper right">
													<div className="circleProgress rightcircle circle60"></div>
												</div>
												<div className="wrapper left">
													<div className="circleProgress leftcircle"></div>
												</div>
											</div>
										</div>
										<p className="circle-num  strong f34">2000</p>
										<p className="circle-des f22 pt10">{Lang.steps_today || 'Steps Today'}</p>
									</div>
									<div className="des-box ml5">
										<div className="circle-box strong f34">
											<div className="circleProgress_wrapper">
												<div className="wrapper right">
													<div className="circleProgress rightcircle circle90"></div>
												</div>
												<div className="wrapper left">
													<div className="circleProgress leftcircle"></div>
												</div>
											</div>
										</div>
										<p className="circle-num  strong f34">300,000</p>
										<p className="circle-des f22 pt10">{Lang.bububao_sum || 'BuBuBao Sum'}<br/> {Lang.assured || 'Assured'}</p>
									</div>
								</div>
							</div>

							<div className="item">
								<p className="f34"><img src="/assets/images/index/credit.png" className="mb5 mr10 icon-img" />{Lang.sesame_credit || 'Sesame Credit'}</p>
								<div className="pt20 pb20 data-des">
									<div className="des-box mr5">
										<div className="circle-box strong f34">
											<div className="circleProgress_wrapper">
												<div className="wrapper right">
													<div className="circleProgress rightcircle circle145"></div>
												</div>
												<div className="wrapper left">
													<div className="circleProgress leftcircle"></div>
												</div>
											</div>
										</div>
										<p className="circle-num  strong f34">750</p>
										<p className="circle-des f22 pt10">{Lang.excellent || 'Excellent'}</p>
									</div>
									<div className="des-box ml5">
										<div className="circle-box strong f34">
											<div className="circleProgress_wrapper">
												<div className="wrapper right">
													<div className="circleProgress rightcircle circle180"></div>
												</div>
												<div className="wrapper left">
													<div className="circleProgress leftcircle"></div>
												</div>
											</div>
										</div>
										<p className="circle-num  strong f34">80%</p>
										<p className="circle-des f22 pt10">{Lang.premium_dis || 'Premium Discount'}</p>
									</div>
								</div>
							</div>

							<div className="clearfix pt30 mr10">
								<Link className="diy_color fr f30" to="/mydata">{Lang.view_All || 'View All'}(12)</Link>
							</div>
						</div>
					</div>

					<div className="index-item bor-bottom">
						<p className="index-item-title  fc0  clearfix"  onClick={()=>actions.routing.push({pathname:"service-list"})}>
							<span className="fl">
								<img src="/assets/images/index/nav4.png" className="fl mr20 " />
								<span className="f34 strong">{Lang.my_service || 'My Services'}</span>
							</span>
							<span className="fr f28"><i className="icon-right"></i></span>
						</p>
						
					</div>
			</div>			
	  	</div>)
	}
}

export default App;